<template>
	<view class="outer_box" :style="{height:height+'px'}">
		<view  v-show="addressNull"  class="" v-cloak>
			<view  class="cart_null">
				<image src="../../static/lipdee/dizhi.png" mode=""></image>
				<text>暂时还没有收货地址~</text>
			</view>
		</view>
		<view v-show="!addressNull" class="card" v-for="(item,index) in addressList" :key="index">
			<view class="title">
				<view class="">收货人：{{item.name}}</view>
				<view class="">{{item.phone}}</view>
			</view>
			<view class="content">
				{{item.province}} {{item.city}} {{item.district}} {{item.address}}
			</view>
			<view class="btn">
				<view class="" @tap="setDefault(item,index)">
					<image v-if="item.isDefault==1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
					<image v-if="item.isDefault==-1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
					<text>设为默认地址</text>
				</view>
				<view class="">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/address/binaji.png" mode=""></image>
					<view class="edit" @tap="getAddressInfo(item.id)">编辑</view>
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/address/shanchu.png" mode=""></image>
					<view class="" @tap='delAddress(item.id)'>删除</view>
				</view>
			</view>
			
		</view>
		<view class="">
			<view class="btn">
				<button @tap="openAddAddress">添加收货地址</button>
			
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height:500,
				addressList:'',
				addressNull:false
			}
		},
		onShow() {
			this.getAddressList()
		},
		onLoad() {
			this.getAddressList()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(0)
				}
			})
		},
		methods: {
			del(id){
				let _this = this
				this.$api.delAddress({
					id: id
				}).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							title: "已删除",
							duration: 1000,
						});
					}
					setTimeout(function() {
						_this.getAddressList()
					}, 500);
				})
			},
			delAddress(id) {
				uni.showModal({
					title: '提示',
					content: '是否删除该收获地址？',
					success: (res)=> {
					if (res.confirm) {
						this.del(id);
					} else if (res.cancel) {
						console.log('用户点击取消');
						}
				 }
			});
			},
			getAddressInfo(id){
				uni.navigateTo({
					url: 'addAddress?id='+id
				});
			},
			getAddressList() {
				let _this = this
				this.$api.getAddressList({}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						_this.addressList = res.data.data
						_this.addressNull = _this.addressList=='' ? true:false
					}
				})
			},
			openAddAddress(){
				uni.navigateTo({
					url:'../address/addAddress'
				})
			},
			//设置默认地址
			setDefault(address, index) {
				let parameter = {
					id: address.id,
					isDefault: address.isDefault == 1 ? -1 : 1
				}
				this.$api.setDefault(parameter).then((res) => {
					if (res.data.code == 200) {
						for (var i = 0; i < this.addressList.length; i++) {
							this.addressList[i].isDefault = -1
						}
						this.addressList[index].isDefault = address.isDefault == 1 ? -1 : 1
					
					}
				})
			
			},
			
		}
	}
</script>

<style lang="less" scoped>
	// page{
	// 	background-color: #f8f8f8;
	// }
	.outer_box{
		background-color: #f8f8f8;
		.cart_null {
			display: flex;
			width: 100%;
			flex-direction: column;
		}
		.cart_null text {
			margin: 0 auto;
			color: #666666;
		}
		
		.cart_null image {
			margin: 60rpx auto;
			width: 250rpx;
			height: 250rpx;
		}
		.btn {
			margin-top: 50rpx;
			button {
				width: 78%;
				height: 100upx;
				background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
				border-radius: 50upx;
				color: #FEFEFE;
				font-size: 32upx;
				line-height: 100upx;
			}
		}
		.card{
			display: flex;
			flex-direction: column;
			margin: 0 auto;
			width: 88%;
			background: #FFFFFF;
			border-radius: 12px;
			margin-top: 20rpx;
			padding: 20rpx;
			.title{
				display: flex;
				justify-content: space-between;
				view{
					color: #333333;
					font-weight: bold;
					font-size: 28rpx;
				}
			}
			.content{
				font-size: 24rpx;
				color: #999999;
				margin: 20rpx 0;
			}
			.btn{
				display: flex;
				justify-content: space-between;
				view:first-child{
					display: flex;
					align-items: center;
					image{
						margin-right: 10rpx;
						height: 46rpx;
						width: 46rpx;
					}
					
				}
				view:last-child{
					display: flex;
					align-items: center;
					.edit{
						margin-right: 50rpx;
					}
					image{
						width: 31rpx;
						height: 31rpx;
						margin-right: 20rpx;
					}
				}
				
			}
		}
	}
	

</style>
